<template>
    <div class="form-container">
        <el-steps :active="Steps" align-center finish-status="success">
            <el-step title="填写商品信息" />
            <el-step title="填写商品促销" />
            <el-step title="填写商品属性" />
            <el-step title="选择商品关联" />
        </el-steps>
        <!-- 填写商品信息 -->
        <el-form ref="ruleFormRef" :model="form1" label-width="150px" :rules="rules" v-show="Steps == 0">
            <el-form-item label="商品分类:" prop='productCategoryId'>
                <el-cascader :options="productCategoryList" @change="handleChange"
                    :props="{ label: 'name', value: 'id', children: 'children' }" v-model="productCategoryId"
                    placeholder="请选择分类">
                </el-cascader>
            </el-form-item>
            <el-form-item label="商品名称:" prop='name'>
                <el-input v-model="form1.name" />
            </el-form-item>
            <el-form-item label="副标题:" prop='subTitle'>
                <el-input v-model="form1.subTitle" />
            </el-form-item>
            <el-form-item label="商品品牌:" prop='brandId'>
                <el-select v-model="form1.brandId" placeholder="请选择品牌">
                    <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"
                        @change="changeBrand" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品介绍:">
                <el-input v-model="form1.description" />
            </el-form-item>
            <el-form-item label="商品货号:">
                <el-input v-model="form1.productSn" />
            </el-form-item>
            <el-form-item label="商品售价:">
                <el-input v-model="form1.price" />
            </el-form-item>
            <el-form-item label="市场价:">
                <el-input v-model="form1.originalPrice" />
            </el-form-item>
            <el-form-item label="商品库存:">
                <el-input v-model="form1.stock" />
            </el-form-item>
            <el-form-item label="计量单位:">
                <el-input v-model="form1.unit" />
            </el-form-item>
            <el-form-item label="商品重量:">
                <div style="display: flex;"><el-input v-model="form1.weight" style="width: 300px;" /><span
                        style="margin-left: 20px;">克</span></div>
            </el-form-item>
            <el-form-item label="排序:">
                <el-input v-model="form1.sort" />
            </el-form-item>
            <div style="justify-content: center;width: 100%;display: flex;">
                <el-button type="primary" @click="submitForm(ruleFormRef)">下一步，填写商品促销</el-button>
            </div>
        </el-form>
        <!-- 填写商品促销 -->
        <el-form :model="form1" label-width="150px" v-show="Steps == 1" style="width: 600px;">
            <el-form-item label="赠送积分:">
                <el-input v-model="form1.giftPoint" />
            </el-form-item>
            <el-form-item label="赠送成长值:">
                <el-input v-model="form1.giftGrowth" />
            </el-form-item>
            <el-form-item label="积分购买限制:">
                <el-input v-model="form1.usePointLimit" />
            </el-form-item>
            <el-form-item label="预告商品:">
                <el-switch v-model="form1.previewStatus" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="商品上架:">
                <el-switch v-model="form1.publishStatus" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="商品推荐:">
                <span style="margin-right: 20px;">新品</span> <el-switch v-model="form1.newStatus" :active-value="1"
                    :inactive-value="0" />
                <span style="margin:0 20px;">推荐</span> <el-switch v-model="form1.recommandStatus" :active-value="1"
                    :inactive-value="0" />
            </el-form-item>
            <el-form-item label="服务保证:">
                <el-checkbox-group v-model="serviceIds">
                    <el-checkbox label="1" @change="serviceIdsChange">无忧退货</el-checkbox>
                    <el-checkbox label="2" @change="serviceIdsChange">快速退款</el-checkbox>
                    <el-checkbox label="3" @change="serviceIdsChange">免费包邮</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="详细页标题:">
                <el-input v-model="form1.detailTitle" />
            </el-form-item>
            <el-form-item label="详细页描述:">
                <el-input v-model="form1.detailDesc" />
            </el-form-item>
            <el-form-item label="商品关键字:">
                <el-input v-model="form1.keywords" />
            </el-form-item>
            <el-form-item label="商品备注:">
                <el-input v-model="form1.note" type="textarea" />
            </el-form-item>
            <el-form-item label="选择优惠方式:">
                <el-radio-group v-model="form1.promotionType">
                    <el-radio-button :label="0">无优惠</el-radio-button>
                    <el-radio-button :label="1">特惠促销</el-radio-button>
                    <el-radio-button :label="2">会员价格</el-radio-button>
                    <el-radio-button :label="3">阶梯价格</el-radio-button>
                    <el-radio-button :label="4">满减价格</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item class="block" v-show="form1.promotionType == 1">
                <div class="inBlock">
                    开始时间: <el-config-provider :locale="zhCn">
                        <el-date-picker v-model="form1.promotionStartTime" type="datetime" placeholder="选择开始时间"
                            format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDateFun" />
                    </el-config-provider>
                </div>
                <div class="inBlock">
                    结束时间: <el-config-provider :locale="zhCn">
                        <el-date-picker v-model="form1.promotionEndTime" type="datetime" placeholder="选择结束时间"
                            format="YYYY-MM-DD HH:mm:ss" />
                    </el-config-provider>
                </div>
                <div class="inBlock">
                    促销价格: <el-input v-model="form1.promotionPrice" placeholder="输入促销价格" />
                </div>
            </el-form-item>
            <el-form-item class="block" v-show="form1.promotionType == 2">
                <div class="inBlock">
                    黄金会员：<el-input v-model="form1.memberPriceList[0].memberPrice" />
                </div>
                <div class="inBlock">
                    白金会员： <el-input v-model="form1.memberPriceList[1].memberPrice" />
                </div>
                <div class="inBlock">
                    钻石会员：<el-input v-model="form1.memberPriceList[2].memberPrice" />
                </div>
            </el-form-item>
            <el-form-item class="block" v-show="form1.promotionType == 3">
                <el-row>
                    <el-col :span="8">
                        数量
                    </el-col>
                    <el-col :span="8">
                        折扣
                    </el-col>
                    <el-col :span="8">
                        操作
                    </el-col>
                </el-row>
                <template v-for="item, index in form1.productLadderList">
                    <el-row>
                        <el-col :span="8">
                            <el-input v-model.number="item.count" />
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model.number="item.discount" @input="productLadderPrice(index)" />
                        </el-col>
                        <el-col :span="8">
                            <el-button type="primary" text @click="delproductLadderList(index)">删除</el-button>
                            <el-button type="primary" text @click="addproductLadderList">添加</el-button>
                        </el-col>
                    </el-row>
                </template>
            </el-form-item>
            <el-form-item class="block" v-show="form1.promotionType == 4">
                <el-row>
                    <el-col :span="8">
                        满
                    </el-col>
                    <el-col :span="8">
                        立减
                    </el-col>
                    <el-col :span="8">
                        操作
                    </el-col>
                </el-row>
                <template v-for="item, index in form1.productFullReductionList">
                    <el-row>
                        <el-col :span="8">
                            <el-input v-model.number="item.fullPrice" />
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model.number="item.reducePrice" />
                        </el-col>
                        <el-col :span="8">
                            <el-button type="primary" text @click="delproductFullReductionList(index)">删除</el-button>
                            <el-button type="primary" text @click="addproductFullReductionList">添加</el-button>
                        </el-col>
                    </el-row>
                </template>
            </el-form-item>
            <div style="justify-content: center;width: 100%;display: flex;">
                <el-button @click="Steps = 0">上一步，填写商品信息</el-button>
                <el-button type="primary" @click="Steps = 2">下一步，填写商品属性</el-button>
            </div>
        </el-form>
        <!-- 填写商品属性 -->
        <el-form :model="form1" label-width="150px" v-show="Steps == 2">
            <el-form-item label="属性类型:">
                <el-select v-model="form1.productAttributeCategoryId" placeholder="请选择属性类型"
                    @change="GetProductAttribute">
                    <el-option v-for="item in ProductAttributeCategoryList" :key="item.id" :label="item.name"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品规格:">
                <el-card class="box-card">
                    <div>
                        <el-checkbox-group v-model="pid" @change="changeSpec">
                            <el-checkbox v-for="item, index in ProductSpec" :label="item.id">{{
                                item.name
                            }}</el-checkbox></el-checkbox-group>
                    </div>
                </el-card>
                <el-table :data="form1.skuStockList" border>
                    <el-table-column v-for="item in ProductSpec" :label="item.name" />
                    <el-table-column property="price" label="销售价格" />
                    <el-table-column property="stock" label="商品库存" />
                    <el-table-column property="lowStock" label="库存预售值" />
                    <el-table-column property="skuCode" label="SKU编号" />
                    <el-table-column label="操作" />
                </el-table>
                <el-button type="primary" style="margin-top: 20px;">刷新列表</el-button>
                <el-button type="primary" style="margin-top: 20px;">同步价格</el-button>
                <el-button type="primary" style="margin-top: 20px;">同步库存</el-button>
            </el-form-item>
            <el-form-item label="商品参数:">
                <el-card class="box-card">
                    <div class="paramInputLabel" v-for="item, index in ProductParam">
                        <span>{{ item.name }} : </span>
                        <el-input style="width: 250px;" v-model="form1.productAttributeValueList[index].value" />
                        <!-- <el-input style="width: 250px;" v-if="item.handAddStatus == 0" />
                        <el-select placeholder="请选择" style="width: 250px;" v-if="item.handAddStatus == 1">
                            <el-option v-for="c in item.inputList" />
                        </el-select> -->
                    </div>
                </el-card>
            </el-form-item>
            <el-form-item label="商品相册:">
                <el-upload v-model:file-list="fileList" :limit="5" action="http://127.0.0.1:5173/api/product/create"
                    list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </el-form-item>
            <el-form-item label="规格参数:">
                <el-radio-group v-model="fwb">
                    <el-radio-button label="电脑端详细" />
                    <el-radio-button label="移动端详细" />
                </el-radio-group>
                <EditorVue ref="Editor1" v-show="fwb == '电脑端详细'" :value="data1.content" @onEditor="data1.onEditor" />
                <EditorVue ref="Editor2" v-show="fwb == '移动端详细'" :value="data2.content" @onEditor="data2.onEditor" />
            </el-form-item>
            <div style="justify-content: center;width: 100%;display: flex;">
                <el-button @click="Steps = 1">上一步，填写商品促销</el-button>
                <el-button type="primary" @click="Steps = 3">下一步，选择商品关联</el-button>
            </div>
        </el-form>
        <!-- 选择商品关联 -->
        <el-form :model="form1" v-show="Steps == 3" style="margin-top: 50px;">
            <el-form-item label="关联专题:">
                <el-transfer v-model="SubjectValue" style="text-align: left; display: inline-block" filterable
                    :props="{ key: 'id', label: 'title' }" :titles="['待选择', '已选择']" :data="SubjectList"
                    @change="changeSubjectValue">
                </el-transfer>
            </el-form-item>
            <el-form-item label="关联优选:">
                <el-transfer v-model="PrefrenceAreaValue" style="text-align: left; display: inline-block" filterable
                    :props="{ key: 'id', label: 'name' }" :titles="['待选择', '已选择']" :data="PrefrenceAreaList"
                    @change="changePrefrenceAreaValue">
                </el-transfer>
            </el-form-item>
            <div style="justify-content: center;width: 100%;display: flex;">
                <el-button @click="Steps = 2">上一步，填写商品属性</el-button>
                <el-button type="primary" @click="Submit">完成，修改商品</el-button>
            </div>
        </el-form>
    </div>
</template>
    
<script setup lang='ts'>
import { useRoute } from 'vue-router';
import { ApiGetProductById, ApiGetBrandListAll, ApiGetProductCategoryWithChildren, ApiUpdateProduct, ApiGetProductAttributeCategoryList, ApiGetProductAttributeListById, ApiGetSubject, ApiGetPrefrenceArea, } from './api';
import { ElMessage, FormInstance, FormRules, ElConfigProvider, UploadUserFile, UploadProps, ElMessageBox } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { Plus } from '@element-plus/icons-vue';
import { onMounted, reactive, toRefs, defineComponent, ref } from 'vue'
import EditorVue from '@/components/editor.vue'
import router from '@/router';
const route = useRoute()
// 品牌数组
const brandList = ref<IBrandList[]>([]);
// 品牌改变时
const changeBrand = () => {
    brandList.value.forEach(i => {
        if (i.id === form1.brandId) {
            form1.brandName = i.name
        }
    })
}
// 商品分类
const productCategoryList = ref<IProductCategoryWithChildren[]>();
const productCategoryId = ref()
// 分类选择改变时
const handleChange = () => {
    form1.productCategoryId = productCategoryId.value[productCategoryId.value.length - 1]
    productCategoryList.value?.forEach(i => {
        if (i.id === form1.productCategoryId) { form1.productCategoryName = i.name }
        else {
            i.children.forEach(c => {
                if (c.id === form1.productCategoryId) {
                    form1.productCategoryName = c.name
                }
            })
        }
    })
}
const ApiGetProductAttributeCategoryListPrams = reactive({ pageNum: 1, pageSize: 100 })// 属性类型
const ProductAttributeCategoryList = ref<ProductAttributeCategoryList[]>()//属性分类列表
const serviceIds = ref<string[]>([])// 服务保证
const serviceIdsChange = () => {
    form1.serviceIds = serviceIds.value.toString()
}
// 获取专题
const SubjectValue = ref<number[]>([])
const changeSubjectValue = (value: number | string) => {
    form1.subjectProductRelationList = SubjectValue.value.map(item => ({
        subjectId: item
    }))
    // console.log(form1.subjectProductRelationList)
}
const SubjectList = ref<ISubject[]>([])
// 获取优选
const PrefrenceAreaValue = ref<number[]>([])
const changePrefrenceAreaValue = (value: number | string) => {
    form1.prefrenceAreaProductRelationList = PrefrenceAreaValue.value.map(item => ({
        prefrenceAreaId: item
    }))
}
const PrefrenceAreaList = ref<IPrefrenceArea[]>([])
// 修改商品
const Submit = () => {
    ElMessageBox.confirm("确定要修改商品吗？", "修改商品", {
        confirmButtonText: "确定", cancelButtonText: "取消", type: "warning",
    }).then(() => {
        ApiUpdateProduct(parseInt(route.query.id as string), form1).then(res => {
            if (res.code == 200) {
                ElMessage.success("修改成功")
                router.go(0)
            } else {
                ElMessage.error("修改失败")
            }
        })
    }).catch(() => {
        ElMessage({ type: 'warning', message: '取消修改', })
    });
}
Promise.all([
    ApiGetProductById(parseInt(route.query.id as string)), //获取指定id的商品
    ApiGetProductCategoryWithChildren(),//获取一级二级商品分类
    ApiGetBrandListAll(),// 获取全部品牌
    ApiGetProductAttributeCategoryList(ApiGetProductAttributeCategoryListPrams),//获取属性类型
    ApiGetSubject(),//获取专题
    ApiGetPrefrenceArea(),//获取优选
]).then(res => {
    Object.assign(form1, res[0].data)
    productCategoryList.value = res[1].data
    productCategoryList.value?.forEach(item => {
        if (item.id == form1.productCategoryId) {
            productCategoryId.value = form1.productCategoryId
        } else {
            item.children.forEach(c => {
                if (c.id == form1.productCategoryId) {
                    console.log('找到了', item.id);
                    productCategoryId.value = [item.id, form1.productCategoryId]
                }
            })
        }
    })
    brandList.value = res[2].data
    ProductAttributeCategoryList.value = res[3].data.list
    serviceIds.value = form1.serviceIds.split('')
    GetProductAttribute(form1.productAttributeCategoryId)
    data1.showBack()
    data2.showBack()
    SubjectList.value = res[4].data
    SubjectValue.value = form1.subjectProductRelationList.map(item => item.subjectId)
    PrefrenceAreaList.value = res[5].data
    PrefrenceAreaValue.value = form1.prefrenceAreaProductRelationList.map(item => item.prefrenceAreaId)
}).catch()
// 步骤条
const Steps = ref(0)
// 富文本
const fwb = ref<'电脑端详细' | '移动端详细'>('电脑端详细')
const Editor1 = ref()
const Editor2 = ref()
interface DataProps {
    content: string;
    showBack: (ref?: any) => void
    onEditor: (value: string) => void;
}
const data1: DataProps = reactive({
    content: '',
    //获取富文本中的内容
    onEditor: (value: string) => {
        console.log("data1", value)
        form1.detailHtml = value
        console.log(form1.detailHtml);
    },
    // 富文本回显
    showBack: () => {
        data1.content = form1.detailHtml
        setTimeout(() => {
            Editor1.value.getContent()
        })
    }
})
const data2: DataProps = reactive({
    content: '',
    //获取富文本中的内容
    onEditor: (value: string) => {
        console.log("data2", value)
        form1.detailMobileHtml = value
    },
    // 富文本回显
    showBack: () => {
        data2.content = form1.detailMobileHtml
        // console.log(" data.content", data2.content)
        setTimeout(() => {
            Editor2.value.getContent()
        })
    }
})
onMounted(() => {
    data1.showBack()
    data2.showBack()
})
// 上传图片
const fileList = ref<UploadUserFile[]>([])
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
const pid = ref([])//勾选的id
// 勾选规格
const changeSpec = (value: number) => {
    console.log(value);
}
const ProductSpec = ref<IProductAttribute[]>([])//规格
const ProductParam = ref<IProductAttribute[]>([])//参数
// 获取商品规格和参数
const GetProductAttribute = (val: number) => {
    Promise.all([
        ApiGetProductAttributeListById(val, 0),
        ApiGetProductAttributeListById(val, 1),
    ]).then((res) => {
        ProductSpec.value = res[0].data.list
        ProductParam.value = res[1].data.list
        form1.productAttributeValueList = ProductParam.value.map(item => ({
            id: item.id,
            productAttributeId: item.productAttributeCategoryId,
            value: '',
        }))
    }).catch(() => { })
}
// 阶梯折后价格
const productLadderPrice = (i: number) => {
    form1.productLadderList[i].price = form1.productLadderList[i].discount * form1.price * 0.1
}
// 删除满减
const delproductFullReductionList = (i: number) => {
    if (form1.productFullReductionList.length == 1) {
        ElMessage.warning("最少保留一条")
    } else {
        form1.productFullReductionList.splice(i, 1)
    }
}
// 添加满减
const addproductFullReductionList = () => {
    if (form1.productFullReductionList.length == 3) {
        ElMessage.warning("最多只能添加三条")
    } else {
        form1.productFullReductionList.push({ fullPrice: 0, reducePrice: 0, })
    }
}
// 删除阶梯
const delproductLadderList = (i: number) => {
    if (form1.productLadderList.length == 1) {
        ElMessage.warning("最少保留一条")
    } else {
        form1.productLadderList.splice(i, 1)
    }
}
// 添加阶梯
const addproductLadderList = () => {
    if (form1.productLadderList.length == 3) {
        ElMessage.warning("最多只能添加三条")
    } else {
        form1.productLadderList.push({ count: 0, discount: 0, price: 0 })
    }
}
// 禁用时间
const disabledDateFun = (time: Record<string, any>): boolean => {
    if (time.getTime() < new Date().getTime()) {
        // true - - -代表日期禁止选择，false- - -日期可以选择
        return true;
    } else {
        return false;
    }
};
// 分类规则
const validate1 = (rule: any, value: any, callback: any) => {
    if (value == 0) {
        callback(new Error('分类不能为空'))
    } else {
        callback()
    }
}
// 品牌规则
const validate2 = (rule: any, value: any, callback: any) => {
    if (value == 0) {
        callback(new Error('品牌不能为空'))
    } else {
        callback()
    }
}
// 规则
const rules = reactive<FormRules>({
    name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }, { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }],
    subTitle: [{ required: true, message: '请填写副标题', trigger: 'blur', }],
    productCategoryId: [{ required: true, validator: validate1, trigger: ["blur", 'change'] }],
    brandId: [{ required: true, validator: validate2, trigger: ["blur", 'change'] }],
})
const form1 = reactive<IProductParam>({
    albumPics: '',//画册图片，连产品图片限制为5张，以逗号分割
    brandId: 0,//品牌id
    brandName: '',//品牌名字
    deleteStatus: 0,//删除状态：0->未删除；1->已删除
    description: '',//商品介绍
    detailDesc: '',//详细页描述
    detailHtml: '',//产品详情网页内容
    detailMobileHtml: '',//移动端网页详情
    detailTitle: '',//详细页标题
    feightTemplateId: 0,
    // flashPromotionCount: 0,
    // flashPromotionId: 0,
    // flashPromotionPrice: 0,
    // flashPromotionSort: 0,
    id: 0,
    giftPoint: 0,//赠送积分
    giftGrowth: 0,//赠送成长值
    keywords: '',//关键字
    lowStock: 0,//库存预警值
    name: '',//商品名称
    newStatus: 0,//新品
    note: '',//商品备注
    originalPrice: 0,//市场价
    pic: '',
    memberPriceList: [{
        memberLevelId: 1,
        memberLevelName: '黄金会员',
        memberPrice: 0
    }, {
        memberLevelId: 2,
        memberLevelName: '白金会员',
        memberPrice: 0,
    }, {
        memberLevelId: 3,
        memberLevelName: '钻石会员',
        memberPrice: 0
    }],//会员价格
    productFullReductionList: [{
        fullPrice: 0,//满
        reducePrice: 0,//立减
    }],//满减价格
    productLadderList: [{
        count: 0,//满足的商品数量
        discount: 0,//	折扣
        price: 0//折后价格
    }],//阶梯价格
    previewStatus: 0,//预告
    price: 0,//商品售价
    productAttributeCategoryId: 0,//商品属性分类id
    productAttributeValueList: [],//商品参数及自定义规格属性
    skuStockList: [],//商品的sku库存信息
    subjectProductRelationList: [],//专题和商品关系
    prefrenceAreaProductRelationList: [],//优选专区和商品的关系
    productCategoryId: 0,//分类id
    productCategoryName: '',//分类名称
    productSn: '',//货号
    promotionEndTime: '',//促销结束时间
    promotionPerLimit: 0,//活动限购数量
    promotionPrice: 0,//促销价格
    promotionStartTime: '',//促销开始时间
    promotionType: 0,//促销类型
    publishStatus: 0,//上架
    recommandStatus: 0,//推荐
    sale: 0,//销量
    serviceIds: '',//服务保证
    sort: 0,//排序
    stock: 0,//库存
    subTitle: '',//副标题
    unit: '',//计量单位
    usePointLimit: 0,//积分购买限制
    verifyStatus: 0,
    weight: 0,//重量
})

const ruleFormRef = ref<FormInstance>()
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            Steps.value = 1
        } else {
            ElMessage.warning("请填写必填信息")
        }
    })
}
</script>
<style lang="less" scoped>
.form-container {
    width: 800px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
    border-radius: 4px;
    border: 1px solid #ebeef5;
}

.block {
    :deep(.el-form-item__content) {
        display: inline-block;
    }

    .inBlock {
        margin-bottom: 20px;
        display: flex;

        :deep(.el-input__wrapper) {
            width: 230px;
        }

        :deep(.el-input) {
            width: 252px;
        }
    }
}

:deep(.el-col) {
    padding: 12px 10px;
    text-align: center;
    border: 1px solid #ebeef5;
}

.box-card {
    background: #f8f9fc;
    width: 100%;
    margin-bottom: 20px;

    .paramInputLabel {
        display: flex;
        margin-bottom: 10px;

        span {
            width: 150px;
            text-align: right;
        }
    }

    :deep(.el-card) {
        border-radius: 4px;
        border: 1px solid #ebeef5;
    }
}
</style>